<template>
  <div>
    <div :id="id" style="height: calc(100vh - 67vh);padding:.25rem .5rem 0rem;clear: both;"></div>
  </div>
</template>
<script>
export default {
  props: ['id', 'dataLine', 'lineTitle'],
  data () {
    return {
      myChart: '',
    }
  },
  methods: {
    fetchLine () {
      this.myChart = this.echarts.init(document.getElementById(this.id), 'light');
      let option = {
        title: {
          text: this.lineTitle,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#000'
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#000'
            }
          }
        },
        legend: {
          icon: "circle",
          data: [this.lineTitle],
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            color: '#000'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: this.lineTitle,
            type: 'line',
            stack: '总量',
            color: '#409eff', //改变折线点的颜色
            areaStyle: {              normal: {
                color: '#1989fa', //改变区域颜色
                opacity: .2,
              }            },
            lineStyle: {
              normal: {
                width: 4,
              }
            },
            data: this.dataLine
          }
        ]
      };
      this.myChart.setOption(option);
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.fetchLine();
    })
  }
}
</script>
<style scoped>
</style>